<template>
  <div class="btns">
    <el-button @click="open" v-bind="$attrs" v-if="showBtn">
      <slot></slot>
    </el-button>
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="visible"
      @close="onClose"
      v-if="visible"
      width="600px"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        size="small"
        v-loading="loading"
        label-width="100px"
      >
        <!-- 登录账号 -->
        <el-form-item label="登录账号：" prop="userAccount">
          <el-input
            size="small"
            v-model.trim="form.userAccount"
            maxlength="12"
            :disabled="this.edit"
          ></el-input>
        </el-form-item>
        <!-- 默认密码 后台生成 -->
        <el-form-item v-if="!edit" label="默认密码：" prop="userPassword">
          <el-input
            size="small"
            v-model.trim="defaultPwd"
            :disabled="true"
          ></el-input>
          <!-- {{ defaultPwd }} -->
        </el-form-item>
        <!-- 用户姓名 -->
        <el-form-item label="用户姓名：" prop="employeeName">
          <el-input
            size="small"
            v-model.trim="form.employeeName"
            maxlength="4"
            minlength="2"
          ></el-input>
        </el-form-item>
        <!-- 联系电话 -->
        <el-form-item label="联系电话：" prop="mobile">
          <el-input
            size="small"
            v-model.trim="form.mobile"
            maxlength="11"
          ></el-input>
        </el-form-item>
        <!-- 用户角色 -->
        <el-form-item label="用户角色：" prop="roleId">
          <selector
            type="roleTypes"
            filterable
            v-model="form.roleId"
            :disableFn="selectorDisableFn"
          />
        </el-form-item>
        <!-- 部门选择 -->
        <el-form-item label="部门选择：" prop="deptIds">
          <selector
            type="deptTreeList"
            :cascader="true"
            :disableFn="selectorDisableFn"
            v-model="form.deptIds"
          />
        </el-form-item>
        <!-- 用户状态 -->
        <el-form-item label="用户状态：" prop="accountStatus">
          <el-switch
            :value="form.accountStatus"
            :active-value="0"
            :inactive-value="1"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="handleSubmit" size="small" type="primary"
          >确 定</el-button
        >
        <el-button @click="visible = false" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import bmapSearch from "@/components/bMap/search.vue";
export default {
  components: {},
  props: {
    showBtn: {
      type: Boolean,
      default: true
    },
    defaultPwd: {
      type: String,
      default: "abc123456"
    }
  },
  data() {
    // 校验员工名字,英文 + 数字组成 12位字符
    var checkEmployeeName = (rule, value, callback) => {
      let pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{2,12}$/;
      console.log("value", value, pattern.test(value));
      if (!pattern.test(value)) {
        callback(new Error("请输入英文+数字格式的账号"));
      } else {
        callback();
      }
    };
    // 校验手机号
    var checkMobile = (rule, value, callback) => {
      let pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,24}$/;
      // console.log("value",value,pattern.test(value))
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("请输入正确格式的手机号"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      visible: false,
      edit: false,
      form: {
        accountStatus: 0
      },
      title: "新增",
      rules: {
        userAccount: {
          required: true,
          validator: checkEmployeeName,
          // message: "请输入登录账号",
          trigger: "blur"
        },
        // employeeNo: { required: true, message: "请输入", trigger: "blur" },
        employeeName: {
          required: true,
          message: "请输入用户名",
          trigger: "blur"
        },
        roleId: { required: true, message: "请选择角色", trigger: "change" },
        mobile: { required: true, validator: checkMobile, trigger: "blur" },
        deptIds: { required: true, message: "请选择部门", trigger: "change" }
      }
    };
  },
  methods: {
    onClose() {
      // this.form = defaultForm()
    },
    handleDepartmentChange(val, type) {
      // if (val && type == 1) {
      //   this.$refs.form.validateField("roleId");
      // } else if (val && type == 2) {
      //   this.$refs.form.validateField("deptIds");
      // }
    },
    async open({
      title = "新增",
      form = { ...this.form },
      params,
      edit = false
    }) {
      this.edit = edit;
      this.title = title;
      this.form = form;
      if (this.$refs.form) this.$refs.form.clearValidate();
      this.visible = true;
      if (params) this.getData(params);
    },
    async getData(params) {
      this.loading = true;
      const [err, res] = await this.$Api.getApi("users").detail({
        params: { ...params }
      });
      this.loading = false;
      if (!err) {
        this.form = res;
      }
    },
    async handleSubmit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.loading = true;
          let [err] = [];
          if (this.edit) {
            [err] = await this.$Api.getApi("users").update({
              data: {
                ...this.form,
                firstDeptId: this.form.deptIds[0],
                secondDeptId: this.form.deptIds[1]
              }
            });
          } else {
            [err] = await this.$Api.getApi("users").add({
              data: {
                ...this.form,
                accountStatus: 0,
                userPassword: this.defaultPwd,
                firstDeptId: this.form.deptIds[0],
                secondDeptId: this.form.deptIds[1]
              }
            });
          }
          this.loading = false;
          if (err) return;
          this.handleSuccess("操作成功！");
          this.visible = false;
          this.$emit("refresh");
        }
      });
    }
  }
};
</script>
